dpot-frontend/app/(main)/watch/[channelSID]/chat-sidebar.scss

.chat-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-page);
	position: relative;

	.chat-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2px 12px;
		background: var(--bg-subtle);
		border-bottom: 1px solid var(--border-default);
		flex-shrink: 0;

		.chat-header-title {
			font-size: 0.875rem;
			font-weight: 600;
			color: var(--text-primary);
		}

		.chat-header-actions {
			display: flex;
			align-items: center;
			gap: 4px;

			.chat-participant-count {
				display: flex;
				align-items: center;
				gap: 4px;
				padding: 4px 8px;
				border: none;
				background: transparent;
				font-size: 0.75rem;
				color: var(--text-secondary);
				cursor: pointer;
				border-radius: 4px;
				transition: background 0.15s, color 0.15s;

				svg {
					font-size: 0.8125rem;
				}

				span {
					font-weight: 500;
				}

				&:hover {
					background: var(--border-default);
					color: var(--text-primary);
				}
			}

			> button:not(.chat-participant-count),
			.chat-menu-wrapper > button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				border: none;
				background: transparent;
				cursor: pointer;
				color: var(--text-secondary);
				border-radius: 4px;
				transition: background 0.15s, color 0.15s;

				&:hover {
					background: var(--border-default);
					color: var(--text-primary);
				}
			}
		}

		.chat-menu-wrapper {
			position: relative;
		}

		.chat-menu {
			position: absolute;
			top: 100%;
			right: 0;
			min-width: 150px;
			background: var(--bg-page);
			border: 1px solid var(--border-default);
			border-radius: 3px;
			z-index: 10;
			overflow: hidden;

			button {
				display: flex;
				align-items: center;
				gap: 8px;
				width: 100%;
				padding: 10px 14px;
				border: none;
				background: transparent;
				cursor: pointer;
				font-size: 0.8125rem;
				color: var(--text-primary);
				text-align: left;
				transition: background 0.15s;

				svg {
					width: 14px;
					color: var(--text-muted);
				}

				&:hover {
					background: var(--bg-subtle);
				}

				&:disabled {
					color: var(--border-strong);
					cursor: not-allowed;

					svg {
						color: var(--border-strong);
					}

					&:hover {
						background: transparent;
					}
				}
			}
		}
	}

	.chat-messages {
		flex: 1;
		overflow-y: auto;
		padding: 8px 12px;
		display: flex;
		flex-direction: column;
		gap: 4px;

		&::-webkit-scrollbar {
			width: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: var(--border-strong);
			border-radius: 2px;
		}

		.chat-system {
			text-align: center;
			font-size: 0.75rem;
			color: var(--text-muted);
			padding: 4px 0;
		}

		.chat-message {
			display: flex;
			align-items: baseline;
			gap: 6px;
			padding: 3px 0;
			line-height: 1.4;
			word-break: break-word;

			.chat-message-time {
				font-size: 0.625rem;
				color: var(--text-muted);
				flex-shrink: 0;
			}

			.chat-message-name {
				font-size: 0.8125em;
				font-weight: 600;
				color: var(--text-secondary);
				flex-shrink: 0;
				max-width: 80px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.chat-message-content {
				font-size: 1em;
				color: var(--text-primary);
			}
		}
	}

	.chat-input-area {
		flex-shrink: 0;
		border-top: 1px solid var(--border-default);
		padding: 8px 10px;
		background: var(--bg-elevated);

		.chat-input-row {
			display: flex;
			gap: 6px;

			input {
				flex: 1;
				padding: 8px 10px;
				border: 1px solid var(--border-default);
				border-radius: 4px;
				font-size: 0.8125rem;
				outline: none;
				transition: border-color 0.15s;

				&:focus {
					border-color: #F7931A;
				}

				&:disabled {
					background: var(--bg-subtle);
					color: var(--text-muted);
				}
			}

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36px;
				height: 36px;
				border: none;
				background: var(--brand-orange);
				color: #fff;
				border-radius: 4px;
				cursor: pointer;
				flex-shrink: 0;
				transition: background 0.15s;

				&:hover {
					background: var(--brand-orange-hover);
				}

				&:disabled {
					background: var(--border-strong);
					cursor: not-allowed;
				}
			}

			.chat-donate-btn {
				background: #FFD700;
				color: #333;

				&:hover {
					background: #FFC400;
				}
			}
		}

		.chat-login-notice {
			text-align: center;
			font-size: 0.8125rem;
			color: var(--text-muted);
			padding: 2px 0;

			a {
				color: var(--brand-orange);
				font-weight: 600;
				text-decoration: underline;

				&:hover {
					color: var(--brand-orange-hover);
				}
			}
		}
	}

	// 참여자 목록 오버레이
	.chat-participants-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--overlay-color);
		z-index: 11;
	}

	// 참여자 목록 패널
	.chat-participants-dialog {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% - 24px);
		max-height: 60%;
		background: var(--bg-page);
		border-radius: 8px;
		box-shadow: 0 8px 24px var(--shadow-color);
		overflow: hidden;
		z-index: 12;

		.chat-participants-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 16px;
			border-bottom: 1px solid var(--border-default);
			background: var(--bg-subtle);

			h3 {
				font-size: 0.875rem;
				font-weight: 600;
				color: var(--text-primary);
				margin: 0;
			}

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 28px;
				height: 28px;
				border: none;
				background: transparent;
				cursor: pointer;
				font-size: 1.25rem;
				color: var(--text-secondary);
				border-radius: 4px;

				&:hover {
					background: var(--border-default);
					color: var(--text-primary);
				}
			}
		}

		.chat-participants-list {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow-y: auto;
			max-height: calc(100% - 52px);

			li {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 10px 16px;
				font-size: 0.8125rem;
				color: var(--text-primary);
				border-bottom: 1px solid var(--bg-subtle);

				&:last-child {
					border-bottom: none;
				}

				.chat-participant-icon {
					color: var(--text-muted);
					font-size: 0.75rem;
				}
			}

			.chat-participants-empty {
				justify-content: center;
				color: var(--text-muted);
				padding: 24px 16px;
			}

			.chat-participants-guest {
				color: var(--text-muted);
				font-style: italic;
			}
		}
	}
}